<template>
	<view class="thtme-item" @click="goToClassList">
		<view class="box" v-if="!isMore">
			<image class="img" :src="classifyList.picurl" mode="aspectFill"></image>
			<view class="mask">
				{{classifyList.name}}
			</view>
			<view class="tab">
				{{updateTime}}前
			</view>
		</view>
		<navigator url="/pages/classfy/classfy" open-type="reLaunch"  class="more" v-if="isMore">
			<image class="backImg" src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			<view class="theMore">
				更多
				<uni-icons type="more" size="30" color="#fff"></uni-icons>
			</view>
		</navigator>
	</view>
</template>

<script setup>
import { computed, onMounted } from 'vue';
let props = defineProps({
	isMore:{
		type:Boolean,
		default:false
	},
	classifyList: {  
	    type: Object,  
	    default: () => ({  
	        updateTime: new Date().getTime() // 提供一个默认的 updateTime  
	    })  
	}  
})
onMounted(()=>{
	
})
let updateTime = computed(()=>{
	const diffInMilliseconds = Date.now()-props.classifyList.updateTime
	const diffInSeconds = diffInMilliseconds / 1000;  
	const diffInMinutes = diffInSeconds / 60;  
	const diffInHours = diffInMinutes / 60;  
	const diffInDays = diffInHours / 24;  
	  
	// 近似计算月和年  
	const monthsDiff = Math.floor(diffInDays / 30.4375); // 假设平均每月30.4375天（为了平均4年一闰）  
	const yearsDiff = Math.floor(diffInDays / 365.25); // 假设平均每年365.25天（为了考虑闰年）  
	  
	if (diffInDays < 31) {  
	    return `${Math.floor(diffInDays)}天`;  
	} else if (monthsDiff < 12) {  
	    return `${monthsDiff}月`;  
	} else {  
	    return `${yearsDiff}年`;  
	}  
})
//前往分类列表页
const goToClassList = () =>{
	uni.navigateTo({
		url:"/pages/class-list/class-list?classid="+props.classifyList._id
	})
}
</script>

<style scoped lang="scss">
	.thtme-item{
		position: relative;
	}
	.box{
		height: 340rpx;
		border-radius: 12rpx;
		overflow: hidden;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.mask{
		width:100%;
		height: 70rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(20rpx);
		font-weight: 600;
		border-radius: 12rpx;
	}
	.tab{
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20rpx);
		font-size: 22rpx;
		padding: 6rpx 10rpx;
		border-radius: 12rpx;
	}
	.more{
		position: relative;
		height: 340rpx;
		border-radius: 12rpx;
		overflow: hidden;
		.backImg{
			width: 100%;
			height: 100%;
		}
		.theMore{
			position: absolute;
			top: 0;
			left: 0;
			color: #fff;
			width:100%;
			height:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(20rpx);
		}
	}
</style>